// heroz

.hero{

    // ============================================================================
    //   This
    // ============================================================================

    // height: 148px;
    padding-top: 20px;

    text-align: center;
    position: relative;
    background: $color-parse-blue center center no-repeat;
    background-size: cover;

    overflow:hidden;

    &:before{
        display: block;
        content: "";
        position: absolute;
        width: 100%; height: 100%;
        left:0; top:0;
        background-color: $color-parse-blue;
        opacity:0.77;
        z-index: 1;
    }

    @include break-min($break-switch-heros){
        height: 120px;
        padding-top: 40px;
    }

    // ============================================================================
    //   Scoped changes
    // ============================================================================

    .container{
        z-index:2;
        position: relative;
        top:50%;
        transform: translateY(-50%) translateZ(0);
    }

    .h1, p{
        margin-left: auto;
        margin-right: auto;
    }
    .h1{
        max-width: 661px;
        margin: 0.5em auto;
    }
    p{
        max-width: 580px;
    }
    .btns{
        margin-top: 20px;
      a{ cursor: pointer; }
        @include break-min($break-switch-heros){
            margin-top: 50px;
        }
    }

    // ============================================================================
    //   Child Elements
    // ============================================================================

    &__video{
        overflow:hidden;
        position: absolute;
        left:0; top:0;
        width:100%; height:100%;
        z-index:0;

        video{
            width: auto;
            height: auto;
            min-width: 100%;
            min-height: 100%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        html.touch &{
            display: none !important;
        }
    }

    &__pointer{

        position:absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 3;

        .icon{
            stroke: $color-gallery-gray;
            animation: anim_scroll-hint 4s infinite;
            animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
          &:hover{
            stroke: $color-parse-blue;
          }
        }

        @include break-min($break-switch-heros){
            // bottom: 0;

            .icon{ width: 39px; height: 39px; }
        }

        html.lte-ie9 & { display:none; }
    }

    &__emoji{
        width: 74px;

        & + .h1{
            margin: 0.6em auto 0;

            & + p{
                margin: 0.9em auto 1.7em;
            }
        }
    }

    // &__parallax{
    //     position: absolute;
    //     left: 0;
    //     top: 0;
    //     height: 100%;
    //     width: 100%;
    //     background: url() center center no-repeat;
    //     background-size: cover;

    //     video{

    //     }
    // }

    // ============================================================================
    //   Modifiers
    // ============================================================================

    &--green{
        background-color: $color-carib-green;
        &:before{ background-color: $color-carib-green; }
        .btn--inverse{ color: $color-carib-green; }
    }

    &--red{
        background-color: $color-rad-red;
        &:before{ background-color: $color-rad-red; }
        .btn--inverse{ color: $color-rad-red; }
    }

    &--basic{
        height: 578px;
        background-color: white;
        &:before{
            background-color: white;
            opacity: 0.92;
        }
        .container{
            a{ color: $color-parse-blue; }
            p{ max-width: 468px; }
        }
    }

     &--about{
        height: 578px;
        background-color: white;
        &:before{
            background-color: white;
            opacity: 0.92;
        }
        .container{
            a{ color: $color-parse-blue; }
            p{ max-width: 558px; }

            .btns{
                width: 100%;
                position: absolute;
                left:0;
                bottom: -100px;
            }
        }
    }

    &--small{
        height: 500px;
    }

    &--noverlay{
        &:before{ display:none !important; }
    }

    &--gradient{
        &:before{
            background: url(/assets/images/heros/gradient_blue-gray.png) left top repeat-x;
            background-size: auto 100%;
            opacity: 1;
        }
    }

    &--home{

      overflow: hidden;
      height: 100vh;
      min-height: 568px;
      padding: 80px 0 0;
      background: none;

      @include break-min($break-switch-heros){
        padding-top: 110px;
        min-height: 700px;
      }

      &:before{
        display:none;
      }
      &:after{
        content: "";
        position: absolute;
        left: 0; right:0;
        top: 80px; bottom: 320px;
        background: url('/assets/images/heros/home.svg') center center no-repeat;
        background-size: auto 100%;

        @include break-min(375px){
          bottom: 300px;
        }
        @include break-min(760px){
          bottom: 270px;
        }
        @include break-min(1160px){
          top: 110px;
          bottom: 210px;
        }
      }

      &__content{
        position: absolute;
        bottom:0;
        height: auto;
        width:100%;
          padding-top: 0px;
          padding-bottom: 70px;
          background: $color-vista-white;
          @include break-max($break-switch-heros){
            padding-top: 60px;
          }
        .container{
          // margin-top: -30px;
          position: static;
          transform: none;

          @include break-min($break-switch-heros){
            padding-top: 60px;
          }
        }
        .h1{
          margin: 0 auto;
          @include break-min(1160px){ max-width:none; }
        }
        .btns{
          margin-top: 1.95em;
        }
      }
    }

    &--docs-landing{
        padding: 166px 0 12px;
        height: auto;
        text-align: left;
        color: white;

        &:before{ display:none !important; }

        &__content{
            padding-right: 30%;
            position: relative;

            .h1{
                margin: 0 0 2px;
                font-family: $font-alright;
                text-align: left;
            }
        }

        @include break-min($break-tablet-max){
            &__quickstart{
                display:block;
            }
        }
    }
}
